<template>
  <div class="box">
    <div class="head-search">
      <search @onSubmit="onLoad">
        <el-form-item label="名称">
          <el-input placeholder="请输入名称" v-model="searchData.mdName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="searchData.mdType" placeholder="请选择类型">
            <el-option v-for="(item, index) in dicDataType"
                       :key="index"
                       :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编码">
          <el-input placeholder="请输入编码" v-model="searchData.mdCode" size="small"></el-input>
        </el-form-item>
      </search>
    </div>
    <section class="fun-btn">
      <el-button @click="handleAdd('add')"
                 class="btn"
                 type="primary"
                 size="small"
                 icon="el-icon-circle-plus-outline">新增
      </el-button>
      <!--<el-button type="danger"
                 @click="handleDel"
                 plain
                 size="small"
                 icon="el-icon-delete">删除</el-button>-->
    </section>

    <avue-crud :option="option"
               :table-loading="tableLoading"
               :data="tableData.list"
               :page.sync="page"
               ref="crud"
               @selection-change="handleSelectChange"
               @row-update="handleRowUpdate"
               @row-save="handleSave"
               @on-load="onLoad"
    >
      <template slot="isPrimaryKey" slot-scope="{row}">
        <el-switch v-model="row.isPrimaryKey" @change="handleRowUpdate(row, 'isPrimaryKey')"></el-switch>
      </template>

      <template slot="isExtend" slot-scope="{row}">
        <el-switch v-model="row.isExtend" @change="handleRowUpdate(row, 'isExtend')"></el-switch>
      </template>
      <template slot="isAutoIncrement" slot-scope="{row}">
        <el-switch v-model="row.isAutoIncrement" @change="handleRowUpdate(row, 'isAutoIncrement')"></el-switch>
      </template>

      <template slot="isQuickQuery" slot-scope="{row}">
        <el-switch v-model="row.isQuickQuery" @change="handleRowUpdate(row)"></el-switch>
      </template>
      <template slot="isQuery" slot-scope="{row}">
        <el-switch v-model="row.isQuery" @change="handleRowUpdate(row)"></el-switch>
      </template>
      <template slot="isNull" slot-scope="{row}">
        <el-switch v-model="row.isNull" @change="handleRowUpdate(row)"></el-switch>
      </template>
      <template slot="isEnable" slot-scope="{row}">
        <el-switch v-model="row.isEnable" @change="handleRowUpdate(row)"></el-switch>
      </template>
      <template slot="isTableHead" slot-scope="{row}">
        <el-switch v-model="row.isTableHead" @change="handleRowUpdate(row)"></el-switch>
      </template>
      <template slot="defTableHead" slot-scope="{row}">
        <el-switch v-model="row.defTableHead" @change="handleRowUpdate(row)"></el-switch>
      </template>
    </avue-crud>

  </div>
</template>

<script>

import Search from '../../../../components/search/search'
import { delEntityCategoryList, getMetadataList } from '../../../../api/category/category'
import { getArchivesDic, getSysDicId } from '../../../../api/dictionary/dictionary'
import { addMetadata, editMetadata } from '../../../../api/metadata'

export default {
  name: 'Metadata', // 元数据管理
  components: {
    Search
  },
  data () {
    return {
      dicDataType: [], // 元数据类型字典
      searchData: {
        mdName: '',
        mdType: '',
        mdCode: ''
      },
      tableLoading: true,
      page: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [20, 40, 60, 80],
        total: 0
      },
      tableData: {},
      dictTypeNameData: [] // 字典类型下拉框数据
    }
  },
  mounted () {
    this.getDic()
  },
  computed: {
    option () {
      return {
        align: 'center',
        menuAlign: 'center',
        header: false,
        border: true,
        size: 'medium',
        height: 'calc(100vh - 235px)',
        index: true, // 显示序号
        indexLabel: '序号', // 显示序号
        selection: true, // 多选
        // editBtn: false, // 行内编辑按钮
        delBtn: false, // 行内删除按钮
        viewBtn: true, // 行内查看按钮
        menuWidth: 200,
        labelWidth: 150,
        column: [
          {
            label: '名称',
            prop: 'mdName',
            overHidden: true,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入元数据名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '类型',
            prop: 'mdType',
            type: 'select',
            overHidden: true,
            width: 100,
            dicUrl: '/yuyi-config-boot/api/config/dictData/child?dictTypeName=metadata_type',
            props: {
              label: 'dictLabel',
              value: 'dictValue'
            },
            rules: [
              {
                required: true,
                message: '请选择元数据类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编码',
            prop: 'mdCode',
            overHidden: true,
            width: 120,
            rules: [
              {
                required: true,
                message: '请输入元数据编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '长度',
            prop: 'mdLength',
            type: 'number',
            overHidden: true,
            width: 120,
            minRows: 0,
            rules: [
              {
                required: true,
                message: '请输入元数据长度',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '索引名',
            prop: 'indexName',
            overHidden: true,
            width: 120
          },
          {
            label: '查询类型',
            prop: 'queryType',
            overHidden: true,
            width: 120,
            type: 'select',
            dicUrl: '/yuyi-config-boot/api/config/dictData/child?dictTypeName=query_type',
            props: {
              label: 'dictLabel',
              value: 'dictValue'
            }
          },
          {
            label: '查询排序号',
            prop: 'orderNo',
            overHidden: true,
            type: 'number',
            width: 120,
            minRows: 0,
            rules: [
              {
                required: true,
                message: '请输入查询排序号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '字典类型名',
            prop: 'dictTypeName',
            type: 'select',
            width: 120,
            dicData: this.dictTypeNameData, // '/yuyi-config-boot/api/config/dictData/child?dictTypeName=metadata_type',
            props: {
              label: 'dictName',
              value: 'dictTypeName'
            }
          },
          {
            label: '是否为默认表头',
            prop: 'defTableHead',
            type: 'switch',
            slot: true,
            value: false,
            width: 150,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '默认表头宽度(px)',
            prop: 'defWidthHead',
            type: 'number',
            width: 150,
            minRows: 80,
            value: 80
          },
          {
            label: '主键',
            prop: 'isPrimaryKey',
            type: 'switch',
            span: 6,
            slot: true,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '为空',
            prop: 'isNull',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可用',
            prop: 'isEnable',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可查询',
            prop: 'isQuery',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '可序列',
            prop: 'isQuickQuery',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '自增',
            prop: 'isAutoIncrement',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '继承',
            prop: 'isExtend',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            dicData: [{ value: false }, { value: true }]
          },
          {
            label: '是否可设为表头',
            prop: 'isTableHead',
            type: 'switch',
            slot: true,
            span: 6,
            value: false,
            width: 150,
            dicData: [{ value: false }, { value: true }]
          }
        ]
      }
    }
  },
  methods: {
    getDic () {
      getSysDicId('metadata_type').then(res => {
        this.dicDataType = res.data.data
      })
      // 获取档案数据字典
      getArchivesDic({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        this.dictTypeNameData = res.data.data.list
      })
    },
    onLoad () {
      this.tableLoading = true
      const query = {
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        params: []
      }
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          query.params.push({
            name: key,
            op: key === 'mdType' ? 'eq' : 'like',
            value: this.searchData[key]
          })
        }
      })
      getMetadataList(query).then(res => {
        this.tableData = res.data.data
        this.page.total = res.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSelectChange (val) {
      // 列表选中项
      this.tableSelected = val
    },
    handleAdd () {
      // 打开新增窗口
      this.$refs.crud.rowAdd()
    },
    handleSave (row, done) {
      // 新增
      addMetadata(row).then(() => {
        this.$message.success('新增成功！')
        done()
      }).catch(() => {
        done()
      })
    },
    handleDel () {
      // 删除
      if (this.tableSelected.length > 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const ids = []
          this.tableSelected.map(item => {
            ids.push(item.id)
          })
          delEntityCategoryList(ids).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message.warning('请最少选择一条数据进行删除操作！')
      }
    },
    handleRowUpdate (row, index, done) {
      // 修改
      editMetadata(row).then(() => {
        this.$message.success('修改成功！')
        if (typeof index === 'number') {
          this.onLoad()
          done()
        }
      }).catch(() => {
        if (typeof index === 'number') {
          done()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../styles/mixin";

  .box {

    .head-search {
      ::v-deep .search-btn {
        margin-top: 0;
      }
    }

    .upload-demo {
      text-align: center;
    }

    .import-content {
      max-height: calc(90vh - 90px);
      overflow-y: auto;
    }

    ::v-deep .el-dialog__body {
      padding: 10px 20px;
    }

  }

  ::v-deep .el-drawer__header {
    color: #333;
    font-weight: bolder;
    padding: 15px 20px;
    margin-bottom: 0;
  }
</style>
